<template>
    <div ref="lhcContTab" class="tx-c">
        <!-- 玩法tab -->
        <div class="flex-box flex-wp tx-c-666 bg-c-g lineh-2">
            <div v-for="(item, i) in tab" :key="i" :class="{
                'wd-25 bor-b' : title == 'rx',
                'wd-33 bor-b' : title != 'rx',
                'circle-R tx-c-wh' : playTab2[0] == item[1],
                'disabled' : item[2] != ''
            }" @click="togTab(item[0], item[1], item[3], item[4], item[5], i)">{{ item[0] }}</div>
        </div>
        <!-- 复式/拖头 -->
        <div class="flex-box flex-pa mar-05 tx-c-666 tx-s-12" v-if="traArr.indexOf(title) > -1 && !lmFlag">
            <div v-for="(item, i) in ftTab" :key="i" @click="togPlay('', item[1])"
            :class="[[item[2]], {
                'tx-c-r': $store.state.lhcTra==item[1]}
            ]">{{ item[0] }}</div>
        </div>
        <!-- 连码tab -->
        <div class="flex-box flex-pa mar-05 tx-c-666 tx-s-12" v-if="title == 'lm' && lmFlag">
            <div v-for="(item, i) in lmTab" :key="i" @click="togPlay(item[1], item[2])"
            :class="[[item[3]], {
                'tx-c-r': $store.state.lhcTra==item[2]}
            ]">{{ item[0] }}</div>
        </div>
        <!-- 六合彩-正特码 -->
        <div class="scroll-cont top" v-if="title == 'ztm'">
            <lhc-options
                :title="playTab2"
                :playType="playTab2[0]"
                :content="c1z49Cont"
                :odds="odds.pl"
                :temp="7"
            ></lhc-options>
            <lhc-options
                :title="playTab2"
                :playType="playTab2[0]"
                :content="hwbCont"
                :odds="odds"
                :temp="4"
            ></lhc-options>
        </div>
        <!-- 六合彩-连码 -->
        <div v-else-if="title == 'lm'">
            <div v-for="(item, i) in lmCont" :key="i">
                <div class="scroll-cont top1" v-show="$store.state.lhcTra == item[0][2]">
                    <div v-for="(m, n) in item" :key="n">
                        <div v-if="i > 1" class="title-lot">{{ m[3] }}</div>
                        <lhc-options
                            :title="playTab2"
                            :playType="'lm_'+playTab2[0]+lmPlay+m[4]"
                            :content="m[0]"
                            :odds="odds[tabOdds]"
                            :temp="m[1]"
                        ></lhc-options>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广东15选5-直选 -->
        <div v-else-if="title == 'zhix'">
            <div v-for="(item, i) in zhixCont" :key="i">
                <div class="scroll-cont top" v-show="zhixIndex == i">
                    <div v-for="(m, n) in item" :key="n">
                        <div class="title-lot">{{ m[1] }}</div>
                        <lhc-options
                            :title="playTab2"
                            :playType="m[0]"
                            :content="c1d11Cont"
                            :odds="odds[m[2]]"
                            :temp="6"
                        ></lhc-options>
                    </div>
                </div>
            </div>
        </div>
        <div :id="title" class="scroll-cont" 
            :class="[ sameObj[title][1] ]" 
            v-else-if="sameArr.indexOf(title) > -1">
            <lhc-options 
                :title="sameTit.indexOf(title) < 0 ? playTab1 : playTab2"
                :playType="playTab2[0]"
                :content="sameObj[title][0]"
                :odds="odds[tabOdds]"
                :temp="$store.state.lotType.indexOf('gd')>-1 ? 6 : 7"
            ></lhc-options>
        </div>
        <div class="scroll-cont" :class="[ topCss[title] ]" v-else>
            <div v-for="(item, i) in combined[title]" :key="i">
                <lhc-options v-show="playTab2[0] == item[2]"
                    :title="title == 'lx' ? playTab1 : playTab2"
                    :playType="playTab2[0]"
                    :content="item[0]"
                    :odds="odds"
                    :temp="item[1]"
                ></lhc-options>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import LhcOptions from "./lhcOptions"
import { isDefine } from '../../common/js/common'
import { c1z49Cont, lmTab, hwbCont, wsCont, sxCont, numCont, qqPlay } from '../../common/js/data'
export default {
    data () {
        return {
            odds : this.$store.state.lotOdds,
            tabOdds : this.tab[0][3],
            playTab1 : [this.tab[0][1], ''], // 选中tab信息
            playTab2 : [this.tab[0][1], this.tab[0][0]], // 选中tab信息
            c1z49Cont : c1z49Cont(), // 1-49内容
            c1d11Cont : numCont(1, 11, ''), // 1-11内容
            hwbCont : hwbCont, // 特码合尾波内容
            ftTab : [
                ['复式', -1, 'flex-f1 padd-05 bor-r'],
                ['拖头', 1, 'flex-f1 padd-05']
            ],
            lmPlay : '',
            lmFlag : this.title == 'lm' ? true : false,
            lmTab : lmTab,
            lmCont : [ // 连码内容
                [[c1z49Cont(), 7, -1, '', '']],
                [[c1z49Cont(), 7, 1, '', '']],
                [[sxCont(0, ''), 4, 2, '生肖一', 'sx0'], [sxCont(0, ''), 4, 2, '生肖二', 'sx1']],
                [[wsCont(0, ''), 4, 3, '尾数一', 'ws0'], [wsCont(0, ''), 4, 3, '尾数二', 'ws1']],
                [[sxCont(0, ''), 4, 4, '生尾一', 'sw0'], [wsCont(0, ''), 4, 4, '生尾二', 'sw1']],
                [[c1z49Cont(), 7, 5, 'A区', 'aa0'], [c1z49Cont(), 7, 5, 'B区', 'bb1']]
            ],
            zhixIndex : 0, // 直选切换显示标识
            zhixCont : [ // 直选内容
                qqPlay(1, 2, 'zhie'),
                qqPlay(4, 5, 'zhie'),
                qqPlay(1, 3, 'zhis'),
                qqPlay(2, 4, 'zhis'),
                qqPlay(3, 5, 'zhis')
            ],
            combined : {
                lx : [ // 六肖内容
                    [sxCont(0, 'ex'), 2, 'lx_ex'],
                    [sxCont(0, 'sanx'), 2, 'lx_sanx'],
                    [sxCont(0, 'six'), 2, 'lx_sx'],
                    [sxCont(0, 'wx'), 2, 'lx_wux'],
                    [sxCont(0, 'lx'), 2, 'lx_lx']
                ], yxws : [ // 一肖尾数内容
                    [sxCont(1, 'yx'), 2, 'yxws_yx'],
                    [sxCont(1, 'yxbz'), 2, 'yxws_yxbz'],
                    [wsCont(1, 'ws', '0'), 2, 'yxws_ws'],
                    [wsCont(1, 'wsbz', '0'), 2, 'yxws_wsbz']
                ], sxl : [ // 生肖连内容
                    [sxCont(1, 'exlz'), 2, 'sxl_exl'],
                    [sxCont(1, 'sxlz'), 2, 'sxl_sanxl'],
                    [sxCont(1, 'sixlz'), 2, 'sxl_sxl'],
                    [sxCont(1, 'wxlz'), 2, 'sxl_wxl'],
                    [sxCont(0, 'exlbz'), 2, 'sxl_exlbz'],
                    [sxCont(0, 'sxlbz'), 2, 'sxl_sanxlbz'],
                    [sxCont(0, 'sixlbz'), 2, 'sxl_sxlbz'],
                    [sxCont(0, 'wxlbz'), 2, 'sxl_wxlbz']
                ], wsl : [ // 尾数连内容
                    [wsCont(0, 'ewlz'), 2, 'wsl_ewl'],
                    [wsCont(0, 'swlz'), 2, 'wsl_sanwl'],
                    [wsCont(0, 'siwlz'), 2, 'wsl_swl'],
                    [wsCont(1, 'ewlbz', 'n'), 2, 'wsl_ewlbz'],
                    [wsCont(1, 'swlbz', 'n'), 2, 'wsl_sanwlbz'],
                    [wsCont(1, 'siwlbz', 'n'), 2, 'wsl_swlbz']
                ]
            },
            sameArr : ['bz', 'dxzy', 'tpz', 'rx', 'zx', 'renx'],
            sameTit : ['zx', 'renx'],
            sameObj : {
                bz : [c1z49Cont(), 'top1'],
                dxzy : [c1z49Cont(), 'top1'],
                tpz : [c1z49Cont(), 'top'],
                rx : [numCont(1, 11, ''), 'top'],
                zx : [numCont(1, 11, ''), 'top'],
                renx : [numCont(1, 20, ''), 'top1']
            },
            traArr : ['lm', 'sxl', 'wsl', 'bz', 'dxzy', 'tpz'], // 拖头模式
            topCss : { // top定位
                lx : 'top', yxws : 'top', sxl : 'top2', wsl : 'top1'
            }
        }
    },
    created () {
        const arr = ['zx', 'zhix', 'renx']
        if(arr.indexOf(this.title) < 0) this.odds = this.odds[this.title]
    },
    props: {
        title : String,
        tab : Array
    },
    methods : {
        togTab (name, value, odds, play, prom, index) {
            // 直选切换显示标识
            this.zhixIndex = index
            // 默认非拖头
            this.$store.state.lhcTra = -1
            // 选中赔率
            this.tabOdds = odds
            // 选中title
            this.playTab1 = [value, '']
            this.playTab2 = [value, name]
            // 选中组合玩法标识
            if(play) this.$store.state.lhcPlay = play
            // 特平中切换top高度
            if(this.title == 'tpz') document.getElementById('tpz').style.top = play > 1 ? '15rem' : '12.875rem'
            // 选中玩法提示标识
            if(JSON.stringify(prom)) this.$store.state.prompts = prom
            // 连码提示标识特殊处理
            if(this.title == 'lm') this.$store.state.prompts = index == 4 ? 19 : index * 6
            // 切换连码选项
            this.lmFlag = this.title == 'lm' && play == 2 ? true : false
            // 重置下注数据
            this.clearData()
        },
        // 复式、胆拖
        togPlay (t, i) {
            this.$store.state.lhcTra = i
            // 连码playtype拼接
            this.lmPlay = isDefine(t) ? '_' + t + '_' : ''
            // 连码玩法说明标识
            const {lhcPlay, prompts} = this.$store.state
            const tab = parseInt(prompts/6) * 6
            if(lhcPlay == 2) this.$store.state.prompts = i==-1 ? 0+tab : i+tab
            this.clearData() // 重置下注数据
        },
        // 重置下注数据
        clearData () {
            this.$store.state.lotOptTra = []
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        }
    },
    components : {
        LhcOptions
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .scroll-cont
        position : fixed
        bottom : 3.25rem
        width : 96%
        overflow : auto
        border-top : 1px solid #ccc
    .scroll-cont::-webkit-scrollbar
        display : none
    .top
        top : 12.875rem
    .top1
        top : 15rem
    .top2
        top : 17rem
    .bor-b
        border-bottom: 1px solid #cfcfcf
    .bor-r
        border-right : 1px solid #DCDCDC
    .mar-05
        margin : .375rem 0
    .padd-05
        padding : .375rem 0
</style>